/**
* 分页组件
*/
<template>
  <el-pagination
    class="page-box"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    background
    :current-page="childMsg.currentPage"
    :page-sizes="[5, 10, 20]"
    :page-size="childMsg.pageSize"
    layout="prev,pager,next"
    :total="childMsg.total"
  >
  </el-pagination>
</template>
<script>
export default {
  name: 'Pagination-com',
  props: ['childMsg'],
  data() {
    return {
      pageparm: {
        currentPage: this.childMsg.currentPage,
        pageSize: this.childMsg.pageSize
      }
    }
  },
  created() { },
  methods: {
    handleSizeChange(val) {
      /**
       * 子传父
       * 参数1 父元素方法
       * 参数2 数据
       */
      this.pageparm.pageSize = val
      this.$emit('callFather', this.pageparm)
    },
    handleCurrentChange(val) {
      /**
       * 子传父
       * 参数1 父元素方法
       * 参数2 数据
       */
      this.pageparm.currentPage = val
      this.$emit('callFather', this.pageparm)
    }
  }
}
</script>

<style lang="scss" scoped>
.page-box {
  margin: 10px auto;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  ::v-deep .el-pager {
    li {
      color: #aaabac !important;
      border: 1px solid #aa0000 !important;
      &.active {
        background-color: #aa0000 !important; /* x */
        color: #fff !important;
      }
      &:hover {
        background-color: #aa0000 !important; /* x */
        color: #fff !important;
      }
    }
  }
}
</style>
